<template>
  <div>
    <!-- 可以通过 $root $parent $children 等一系列组件间的关系属性来访问对应实例,从而调用对应实例身上的方法 -->
    <div class="topred">
      <div class="topfix">
        <div class="topfl">
          <van-icon color="white" name="music-o" />
          <span>林滨网易云</span>
        </div>
        <div class="topfr">
          <span class="fd">下载APP</span>
        </div>
      </div>
    </div>

    <van-tabs v-model="tab_act" class="title_a" @change="tab_change">
      <van-tab name="Recommend" title="推荐音乐"></van-tab>
      <van-tab name="Rank" title="热歌榜"></van-tab>
      <van-tab name="Search" title="搜索"></van-tab>
    </van-tabs>
    <van-loading type="spinner" color="#1989fa" />
    <!-- 渲染二级路由 -->

    <router-view :style="{ paddingBottom: song_info.id ? '50px' : '0' }" />

    <!--  歌曲播放 -->

    <transition name="fade">
      <!-- 根据仓库内 song_info 是否有id 来表示用户是都点击了某一个 song.vue 组件进行播放 -->
      <playerbar
        v-show="song_info.id"
        @prev="prev_song"
        @next="next_song"
        @click.native="change_playpage_show"
      ></playerbar>
    </transition>

    <transition name="audio">
      <myaudio
        @prev="prev_song"
        @next="next_song"
        v-show="show_playpage"
        @close="show_playpage = false"
      ></myaudio>
    </transition>
  </div>
</template>

<script>
import playerbar from "../components/playerBar";
import myaudio from "../components/myaudio";
import { mapState } from "vuex";
export default {
  data() {
    return {
      tab_act: "Recommend",
      show_playpage: false,
    };
  },
  components: {
    playerbar,
    myaudio,
  },
  computed: {
    ...mapState(["song_info", "song_idx", "play_list"]),
  },
  methods: {
    change_playpage_show() {
      this.show_playpage = true;
    },
    prev_song() {
      let new_idx;
      if (this.song_idx == 0) {
        new_idx = this.play_list.length - 1;
      } else {
        new_idx = this.song_idx - 1;
      }
      let prev_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      this.$audio.playSong(prev_id);
    },

    next_song() {
      let new_idx;
      if (this.song_idx == this.play_list.length - 1) {
        new_idx = 0;
      } else {
        new_idx = this.song_idx + 1;
      }

      let next_id = this.play_list[new_idx];
      this.$store.commit("change_idx", new_idx);
      this.$audio.playSong(next_id);
    },

    tab_change(name) {
      this.$router.push({
        name: name,
      });
    },
  },
  watch: {
    $route: {
      handler(val) {
        let path = ["Recommend", "Rank", "Search"];
        if (path.includes(val.name)) {
          // 修复导航闪动
          this.tab_act = val.name;
        }
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.topred {
  position: relative;
  width: 100%;

  padding-bottom: 90px;
  .topfix {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    width: 100%;
    height: 84px;
    background-color: #d43c33;
    box-sizing: border-box;
    .topfl {
      position: relative;
      width: 142px;
      height: 25px;
      span {
        color: #fff;
        font-size: 20px;
        letter-spacing: 1px;
      }
      i {
        font-size: 23px;
        border-radius: 8px;
        margin-right: 7px;
        top: 5px;
      }
    }
    .fd {
      position: relative;
      display: inline-block;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      width: 100px;
      text-align: center;
      color: #d43c33;
      background-color: #fff;
      border-radius: 37.5%/100%;
    }
  }
}

.fade-enter,
.fade-leave-to {
  transform: translateY(100%);
}
/* 为进场过程和离场过程 设置transition 属性 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}

//---------------------------

.audio-enter,
.audio-leave-to {
  transform: translateY(50%);
  opacity: 0.5;
}
/* 为进场过程和离场过程 设置transition 属性 */
.audio-enter-active,
.audio-leave-active {
  transition: all 0.2s;
}

////
.title_a {
  position: fixed;
  top: 84px;
  left: 0;
  z-index: 100;
  width: 100%;
}

.audio {
  padding-bottom: 50px;
}
</style>
